<template>
  <div>
    <van-nav-bar left-arrow/>

    <van-form @submit="onSubmit">
      <p>短信登录</p>
  <van-field
    v-model="username"
    name="username"
    placeholder="请输入手机号"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />

  <van-field
  center
  clearable
  placeholder="请输入验证码"
>
  <template #button>
    <van-button size="small" >发送验证码</van-button>
  </template>
</van-field>
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">登录</van-button>
  </div>
</van-form>

  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  name: 'LoginPage',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    onClickLeft () {
      Toast('返回')
    },
    onSubmit (values) {
      console.log('submit', values)
    }
  }
}
</script>

<style>
p{
  margin-left: 15px;
}
</style>
